﻿<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; Charset=gb2312">
    <meta http-equiv="Content-Language" content="zh-CN">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <title th:text="${tbArticleInfo.title}"></title>
    <link rel="shortcut icon" href="/img/Logo_40.png" type="image/x-icon">
    <!--Layui-->
    <link href="/layui/css/layui.css" rel="stylesheet" />
    <!--font-awesome-->
    <link href="/plugns/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
    <!--全局样式表-->
    <link href="/css/global.css" rel="stylesheet" />
    <!-- 比较好用的代码着色插件 -->
    <link href="/css/prettify.css" rel="stylesheet" />
    <!-- 本页样式表 -->
    <link href="/css/detail.css" rel="stylesheet" />
    <link rel="stylesheet" href="/plugns/editormd/css/editormd.css" />
    <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
    <script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
    <script src="/plugns/editormd/lib/marked.min.js"></script>
    <script src="/plugns/editormd/lib/prettify.min.js"></script>
    <script src="/plugns/editormd/lib/raphael.min.js"></script>
    <script src="/plugns/editormd/lib/underscore.min.js"></script>
    <script src="/plugns/editormd/lib/sequence-diagram.min.js"></script>
    <script src="/plugns/editormd/lib/flowchart.min.js"></script>
    <script src="/plugns/editormd/lib/jquery.flowchart.min.js"></script>
    <script type="text/javascript" src="/plugns/editormd/editormd.js"></script>
</head>
<body>
    <!-- 导航 -->
    <nav class="blog-nav layui-header">
        <div class="blog-container" th:if="${thirdLoginUser!=null}">
            <!-- QQ互联登陆 -->
            <a class="blog-user" href = "javascript:void(0);" onclick ="qqloginOut()" >
                <img th:src="@{${thirdLoginUser.avatar}}" alt="点我退出" title="点我退出" />
                <cite id="nickName" class="layui-hide-xs" th:text="${thirdLoginUser.nickName}"></cite>
            </a>
            <!-- 导航菜单 -->
            <ul class="layui-nav" lay-filter="nav">
                <li class="layui-nav-item ">
                    <a href="/blog/toHome"><i class="fa fa-home fa-fw"></i>&nbsp;网站首页</a>
                </li>
                <li class="layui-nav-item layui-this">
                    <a href="/blog/toArticle"><i class="fa fa-file-text fa-fw"></i>&nbsp;文章专栏</a>
                    <dl class="layui-nav-child">
                        <dd><a href="/blog/toResource?categoryName=图片">图片</a></dd>
                        <dd><a href="/blog/toResource?categoryName=源码">源码</a></dd>
                        <dd><a href="/blog/toResource?categoryName=电子书">电子书</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="/blog/toResource"><i class="fa fa-tags fa-fw"></i>&nbsp;资源分享</a>
                </li>
                <li class="layui-nav-item">
                    <a href="/blog/toTimeline"><i class="fa fa-hourglass-half fa-fw"></i>&nbsp;点点滴滴</a>
                </li>
                <li class="layui-nav-item">
                    <a href="/blog/about"><i class="fa fa-info fa-fw"></i>&nbsp;关于本站</a>
                </li>
            </ul>
            <!-- 手机和平板的导航开关 -->
            <a class="blog-navicon" href="javascript:;">
                <i class="fa fa-navicon"></i>
            </a>
        </div>
        <div class="blog-container" th:if="${thirdLoginUser==null}">
            <!-- QQ互联登陆 -->
<!--            <a href="qq/auth?status=2" class="blog-user">-->
<!--                <i class="fa fa-qq"></i>-->
<!--            </a>-->
            <a href = "javascript:void(0);" onclick ="logins()"  class="blog-user">
                <i class="fa fa-qq"></i>
            </a>
            <!-- 不落阁 -->
            <a class="blog-logo" href="">墨殇</a>
            <!-- 导航菜单 -->
            <ul class="layui-nav" lay-filter="nav">
                <li class="layui-nav-item ">
                    <a href="/blog/toHome"><i class="fa fa-home fa-fw"></i>&nbsp;网站首页</a>
                </li>
                <li class="layui-nav-item layui-this">
                    <a href="/blog/toArticle"><i class="fa fa-file-text fa-fw"></i>&nbsp;文章专栏</a>
                </li>
                <li class="layui-nav-item">
                    <a href="/blog/toResource"><i class="fa fa-tags fa-fw"></i>&nbsp;资源分享</a>
                    <dl class="layui-nav-child">
                        <dd><a href="/blog/toResource?categoryName=图片">图片</a></dd>
                        <dd><a href="/blog/toResource?categoryName=源码">源码</a></dd>
                        <dd><a href="/blog/toResource?categoryName=电子书">电子书</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="/blog/toTimeline"><i class="fa fa-hourglass-half fa-fw"></i>&nbsp;点点滴滴</a>
                </li>
                <li class="layui-nav-item">
                    <a href="/blog/about"><i class="fa fa-info fa-fw"></i>&nbsp;关于本站</a>
                </li>
            </ul>
            <!-- 手机和平板的导航开关 -->
            <a class="blog-navicon" href="javascript:;">
                <i class="fa fa-navicon"></i>
            </a>
        </div>
    </nav>
    <!-- 主体（一般只改变这里的内容） -->
    <div class="blog-body">
        <div class="blog-container">
            <blockquote class="layui-elem-quote sitemap layui-breadcrumb shadow">
                <a href="" title="网站首页">网站首页</a>
                <a href="/blog/toArticle" title="文章专栏">文章专栏</a>
                <a><cite th:text="${tbArticleInfo.title}"></cite></a>
            </blockquote>
            <div class="blog-main">
                <div class="blog-main-left">
                    <!-- 文章内容（使用Kingeditor富文本编辑器发表的） -->
                    <div class="article-detail shadow">
                        <div class="article-detail-title" th:text="${tbArticleInfo.title}"></div>
                        <div class="article-detail-info">
                            编辑时间<span th:text="${#dates.format(tbArticleInfo.createTime, 'yyyy-MM-dd hh:mm:ss')}"></span>
                            作者:<span th:text="${tbArticleInfo.createName}"></span>
                            浏览量：<span th:text="${tbArticleInfo.traffic}"></span>
                        </div>
                        <div class="article-left" style="text-align: center">
                            <img id="img" th:src="@{${tbArticleInfo.image}}" style="width: 400px;height: 400px" />
                        </div>
                        <div id="test-editormd" class="form-control">
                            <textarea id="append-test" style="display:none;" th:text="${tbArticleInfo.content}"></textarea>
                        </div>

                    </div>
                    <div class="blog-module shadow" style="box-shadow: 0 1px 8px #a6a6a6;">
                        <div class="component-box">
                        <input type="hidden" id="userId" th:if="${thirdLoginUser}!=null" th:value="${thirdLoginUser.id}">
                        <input type="hidden" id="userId" th:if="${thirdLoginUser}==null" >
                        <a class="layui-btn layui-btn-danger zan" ><i class="fa fa-thumbs-o-up"></i> 赞(<span class="likeCount" th:text="${tbArticleInfo.support}"></span>)</a>
                        <a  class="layui-btn share "><i class="fa fa-share-alt fa-fw"></i>分享</a></a>
                        </div>

                    </div>
                    <!-- 评论区域 -->
                    <div class="blog-module shadow" style="box-shadow: 0 1px 8px #a6a6a6;">
                        <fieldset class="layui-elem-field layui-field-title" style="margin-bottom:0">
                            <legend>来说两句吧</legend>
                            <div class="layui-field-box">
                                <form class="layui-form blog-editor" action="">
                                    <div class="layui-form-item">
                                        <input type="hidden" name="articleId" th:value="${tbArticleInfo.id}">
                                        <input type="hidden" name="type" th:value="1">
                                        <textarea name="content" lay-verify="content" id="remarkEditor" placeholder="请输入内容" class="layui-textarea layui-hide"></textarea>
                                    </div>
                                    <div class="layui-form-item" th:if="${thirdLoginUser!=null}">
                                        <input type="hidden" name="name" id="userNmame" th:value="${thirdLoginUser.nickName}">
                                        <input type="hidden" name="image" id="avatar" th:value="${thirdLoginUser.avatar}">
                                        <input type="hidden" name="type" th:value="1">
                                        <button class="layui-btn" lay-submit="formRemark" lay-filter="formRemark">提交评论</button>
                                    </div>

                                    <div class="layui-form-item" th:if="${thirdLoginUser==null}">
                                        <a class="layui-btn" href = "javascript:void(0);" onclick ="logins()"  >请先登录</a>
                                    </div>
                                </form>

                            </div>
                        </fieldset>
                        <div class="blog-module-title">最新评论</div>
                        <input type="hidden" id="articleId" th:value="${tbArticleInfo.id}"/>
                        <!--文章评论-->
                        <ul class="blog-comment" id="articleComments" page-count="1"></ul>
                        <!--文章评论-->
                    </div>
                </div>
                <div class="blog-main-right">
                    <!--右边悬浮 平板或手机设备显示-->
                    <div class="category-toggle"><i class="fa fa-chevron-left"></i></div><!--这个div位置不能改，否则需要添加一个div来代替它或者修改样式表-->
                    <div class="article-category shadow">
                        <div class="article-category-title">标签</div>
                        <a th:each="label:${labelList}"  th:href="@{/blog/toLableArticle(label=${label.value})}" th:text="${label.value}"></a>
                        <div class="clear"></div>
                    </div>
                    <div class="article-category shadow" >
                        <div class="article-category-title">分类导航</div>
                        <a th:href="@{/blog/toSortArticle(sortId=${tbSort.id})}" th:each="tbSort:${sortList}" th:text="${tbSort.name}"></a>

                        <div class="clear"></div>
                    </div>
                    <div class="blog-module shadow">
                        <div class="blog-module-title">相似文章</div>
                        <ul class="fa-ul blog-module-ul" th:if="${nearlist!=null}" th:each="art: ${nearlist}">
                            <li><i class="fa-li fa fa-hand-o-right"></i><a th:href="@{/blog/toDetail(id=${art.id})}" th:text="${art.title}"></a></li>
                        </ul>
                    </div>

                </div>
                <div class="clear"></div>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <!-- 底部 -->
    <footer class="blog-footer">
        <p><span>Copyright</span><span>&copy;</span><span>2018-2019</span><a href="http://www.moshang.work">墨殇</a><span>Design By moshang</span></p>
        <p><a href="http://www.miibeian.gov.cn/" target="_blank">豫ICP备18034337号</a><a href="/toLogin" target="_blank">后台登录管理</a></p>
    </footer>
    <!--侧边导航-->
    <ul class="layui-nav layui-nav-tree layui-nav-side blog-nav-left layui-hide" lay-filter="nav">
        <li class="layui-nav-item">
            <a href="/blog/toHome"><i class="fa fa-home fa-fw"></i>&nbsp;网站首页</a>
        </li>
        <li class="layui-nav-item layui-this">
            <a href="/blog/toArticle"><i class="fa fa-file-text fa-fw"></i>&nbsp;文章专栏</a>
        </li>
        <li class="layui-nav-item">
            <a href="/blog/toResource"><i class="fa fa-tags fa-fw"></i>&nbsp;资源分享</a>
        </li>
        <li class="layui-nav-item">
            <a href="/blog/toTimeline"><i class="fa fa-road fa-fw"></i>&nbsp;点点滴滴</a>
        </li>
        <li class="layui-nav-item">
            <a href="/blog/about"><i class="fa fa-info fa-fw"></i>&nbsp;关于本站</a>
        </li>
    </ul>
    <div class="bdsharebuttonbox" data-tag="share_1" style="display:none;">
        <a class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
        <a class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
        <a class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
        <a class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
    </div>
    <!-- layui.js -->
    <script src="/layui/layui.js"></script>
    <!-- 自定义全局脚本 -->
    <script src="/js/web/global.js"></script>
    <!-- 比较好用的代码着色插件 -->
    <script src="/js/web/prettify.js"></script>
    <!-- 本页脚本 -->
    <script src="/js/web/detail.js"></script>

    <script th:inline="javascript" type="text/javascript" >
        var counts=1;
        var shareIndex, $;
        layui.config({
            base: '/js/common/' //假设这是你存放拓展模块的根目录
        }).use(['layer','form','table','jquery','laypage','common','flow','layedit'], function() {
            var layer = layui.layer,
                $ = layui.jquery,
                form = layui.form,
                table = layui.table,
                flow = layui.flow,
                layedit=layui.layedit,
                laypage = layui.laypage;
            //评论和留言的编辑器。
            var editIndex = layedit.build('remarkEditor', {
                height: 150,
            });
            //评论和留言的编辑器的验证
            form.verify({
                content: function (value) {
                    value = $.trim(layedit.getContent(editIndex));
                    if (value == "") return "请输入内容";
                    layedit.sync(editIndex);
                },
                replyContent: function (value) {
                    if (value == "") return "请输入内容";
                }
            });
            //点赞
            $(".zan").click(function () {
                if ([[${thirdLoginUser}]]==null){
                    layer.msg("请先登录！",{icon: 6})
                }else{
                    $.ajax({
                        type : "get",
                        url : "support",
                        data : {"articleId":$("#articleId").val(),"userId":$("#userId").val()},
                        async : false,
                        success : function(res){
                                layer.msg(res.msg,{icon: 1})
                            $(".likeCount").html(res.data.support);

                        }
                    });

                }
            })
            $(".share").click(function () {
                shareIndex = layer.open({
                    type: 1,
                    shade: 0.6,
                    shadeClose: true,
                    scrollbar: false ,//屏蔽浏览器滚动条
                    area: ['auto', 'no'],
                    resize: false,
                    skin: 'share',
                    closeBtn: 0,
                    anim: 1,
                    title: false, //不显示标题
                    content: $('.bdsharebuttonbox')
                });
            })
            // 监听回复提交
            form.on('submit(formReply)', function(data) {
                var li = $(data.elem).parents(" li");
                var index = layer.load(1);
                var url = '/message/add';
                $.ajax({
                    type: "POST",
                    url: url,
                    data: data.field,
                    success: function(response) {
                        layer.close(index);
                        if( response.message == '成功' ) {
                            var data = response.data;

                            var html = '<hr>' +
                                '<div class="comment-child">' +
                                '<a name="reply-'+data.messageList[0].id+'"></a>' +
                                '<img src="'+data.messageList[0].image+'" alt="'+data.messageList[0].image+'">' +
                                '<div class="info">' +
                                '<span class="username">'+data.messageList[0].name+'</span>' +
                                '<span style="padding-right:0;margin-left:-5px;"> 回复 </span>' +
                                '<span class="username">'+data.name+'</span>' +
                                '<span>'+data.messageList[0].content+'</span>' +
                                '</div>' +
                                '<p class="info">' +
                                '<span class="comment-time">'+data.messageList[0].createTime+'</span>' +
                                '<a href="javascript:;" class="btn-reply" data-target-id="'+data.messageList[0].id+'" data-target-name="'+data.messageList[0].name+'">回复</a>' +
                                '</p>' +
                                '</div>';

                            li.find(" textarea").val("");
                            li.find(" a:contains('收起')").click();

                            $(html).insertAfter($(li).find(".comment-parent"));

                            layer.msg("回复成功", {
                                icon: 1
                            });
                        } else {
                            layer.msg(response.message);
                        }
                    },
                    error: function(data) {
                        layer.close(index);
                        layer.msg("网络错误，请稍后尝试！");
                    }
                });
                return false;
            });
            // 监听评论提交
            form.on('submit(formRemark)', function(data) {
                var index = layer.load(1);
                var url = '/message/add';
                $.ajax({
                    type: "POST",
                    url: url,
                    data: data.field,
                    success: function(response) {
                        layer.close(index);
                        if(response.message == '成功' ) {
                            var data = response.data;
                            var html = '<li>' +
                                '<div class="comment-parent">' +
                                '<a name="comment-'+data.id+'"></a>' +
                                '<img src="'+data.image+'" alt="'+data.name+'">' +
                                '<div class="info">' +
                                '<span class="username">'+data.name+'</span>' +
                                '</div>' +
                                '<div class="comment-content">'+data.content+'</div>' +
                                '<p class="info info-footer">' +
                                '<span class="comment-time">'+data.createTime+'</span>' +
                                '<a href="javascript:;" class="btn-reply" data-target-id="'+data.id+'" data-target-name="'+data.name+'">回复</a>' +
                                '</p>' +
                                '</div>' +
                                '<div class="replycontainer layui-hide">' +
                                '<form class="layui-form" action="">' +
                                '<input type="hidden" name="name" value="">' +
                                '<input type="hidden" name="image" value="">' +
                                '<input type="hidden" name="articleId" value="">' +
                                '<input type="hidden" name="type" value="1">' +
                                '<input type="hidden" name="parentId" value="">' +
                                '<div class="layui-form-item">' +
                                '<textarea name="content" lay-verify="replyContent" placeholder="请输入回复内容" class="layui-textarea" style="min-height:80px;"></textarea>' +
                                '</div>' +
                                '<div class="layui-form-item">' +
                                '<button class="layui-btn layui-btn-xs" lay-submit="formReply" lay-filter="formReply">提交</button>' +
                                '</div>' +
                                '</form>' +
                                '</div>' +
                                '</li>';

                            $("#articleComments").prepend(html);
                            $('#remarkEditor').val('');

                            editIndex = layedit.build('remarkEditor', {
                                height: 150,
                                tool: ['face', '|', 'link'],
                            });

                            layer.msg("评论成功", {
                                icon: 1
                            });
                        } else {
                            layer.msg(response.msg);
                        }
                    },
                    error: function(data) {
                        layer.close(index);
                        layer.msg('网络错误，请稍后尝试！');
                    }
                });
                return false;
            });
            // 评论显示
            flow.load({
                elem: '#articleComments',
                isAuto : true,
                end : '没有更多了哦！╮(╯▽╰)╭',
                done: function(page, next){ //执行下一页的回调
                    var article_id = $("#articleId").val();

                    $.ajax({
                        url:'/blog/findList?page='+page,
                        type:'get',
                        data:{'id':article_id},
                        success:function(res){
                            if( res.code == 200 )
                            {
                                var list = res.data.data;
                                var html = '';

                                $(list).each(function (k,v) {

                                    html += '<li>' +
                                        '<div class="comment-parent">' +
                                        '<a name="comment-'+v.id+'"></a>' +
                                        '<img src="'+v.image+'" alt="'+v.image+'">' +
                                        '<div class="info"><span class="username">'+v.name+'</span></div>' +
                                        '<div class="comment-content">'+v.content+'</div>' +
                                        '<p class="info info-footer">' +
                                        '<span class="comment-time">'+v.createTime+'</span>' +
                                        '<a href="javascript:;" class="btn-reply" data-target-id="'+v.id+'" data-target-name="'+v.name+'">回复</a> ' +
                                        '</p>' +
                                        '</div>';

                                    if ( JSON.stringify(v.messageList) !== null )
                                    {
                                        $(v.messageList).each(function (key,val) {
                                            html += '<hr>' +
                                                '<div class="comment-child">' +
                                                '<a name="reply-'+val.id+'" alt="'+val.name+'"></a>' +
                                                '<img src="'+val.image+'">' +
                                                '<div class="info">' +
                                                '<span class="username">'+val.name+'</span>' +
                                                '<span style="padding-right:0;margin-left:-5px;"> 回复 </span>' +
                                                // '<span class="username">'+val.be_replied_nickname+'</span>' +
                                                '<span>'+val.content+'</span>' +
                                                '</div>' +
                                                '<p class="info">' +
                                                '<span class="comment-time">'+val.createTime+'</span>' +
                                                '<a href="javascript:;" class="btn-reply" data-target-id="'+val.id+'" data-target-name="'+val.name+'">回复</a>' +
                                                '</p>' +
                                                '</div>';
                                        });
                                    }

                                    html += '<div class="replycontainer layui-hide">' +
                                        '<form class="layui-form" action="">' +
                                        '<input type="hidden" name="name" value="">' +
                                        '<input type="hidden" name="image" value="">' +
                                        '<input type="hidden" name="articleId" value="">' +
                                        '<input type="hidden" name="type" value="1">' +
                                        '<input type="hidden" name="parentId" value="">' +
                                        // '<input type="hidden" name="parentId" value="'+v.id+'">' +
                                        '<div class="layui-form-item">' +
                                        '<textarea name="content" lay-verify="replyContent" id="remarkEditor" placeholder="请输入回复内容" class="layui-textarea" style="min-height:80px;"></textarea>' +
                                        '</div>' +
                                        '<div class="layui-form-item">' +
                                        '<button class="layui-btn layui-btn-xs" lay-submit="formReply" lay-filter="formReply">提交</button>' +
                                        '</div>' +
                                        '</form>' +
                                        '</div>' +
                                        '</li>';
                                });

                                next(html, page < res.data.totalPage);
                            }else{
                                layer.msg("查询失败",{icon:2,time:2000,shade:0.5});
                            }
                        },
                        error:function(XMLHttpRequest, textStatus, errorThrown){
                            layer.msg('网络错误，请稍后尝试！');
                        }
                    });
                }
            });
            //回复按钮点击事件
            $('#articleComments').on('click', '.btn-reply', function () {
                if ([[${thirdLoginUser}]]==null){
                    layer.msg("请先登录！",{icon: 6})
                }else {
                    var oldName = $(this).data('target-name');
                    var parentId = $(this).data('target-id');
                    var targetName =$("#userNmame").val();
                      var  targetImage =$("#avatar").val();
                       var articleId = $("#articleId").val();
                    $container = $(this).parent('p').parent().siblings('.replycontainer');
                    if ($(this).text() == '回复') {
                        $container.find('textarea').attr('placeholder', '回复【' + oldName + '】');
                        $container.removeClass('layui-hide');
                        $container.find('input[name="name"]').val(targetName);
                        $container.find('input[name="image"]').val(targetImage);
                        $container.find('input[name="parentId"]').val(parentId);
                        $container.find('input[name="articleId"]').val(articleId);
                        $(this).parents('.articleComments li').find('.btn-reply').text('回复');
                        $(this).text('收起');
                    } else {
                        $container.addClass('layui-hide');
                        $container.find('input[name="openid"]').val(0);
                        $container.find('input[name="reply_openid"]').val(0);
                        $(this).text('回复');
                    }
                }
            });
        });

        editormd.markdownToHTML("test-editormd", {
            htmlDecode      : "style,script,iframe",
            emoji           : true,
            taskList        : true,
            tex             : true,  // 默认不解析
            flowChart       : true,  // 默认不解析
            sequenceDiagram : true  // 默认不解析
        });
        var  redirectUrl=window.location.href;
        function logins(){
            location.href="/qq/auth?status=2&redirectUrl="+redirectUrl;
        }
        function qqloginOut(){
            location.href="/qqloginOut?redirectUrl="+redirectUrl;
        }
    </script>
</body>
</html>
